
<template>
      <div class="article">
          <div>
          <h2 class="title">{{ detailList.title }}</h2>
        <el-button @click="backHome()" class="back" type="warning">返回</el-button>

          </div>

        <div style="margin-right: 250px">
          <span>浏览量：{{ detailList.readingQuantity }}</span>
          <span class="time">发布时间：{{ detailList.createTime }}</span>
        </div>

        <div >
          <p class="content">
            {{ detailList.articleContent }}
          </p>
        </div>
      </div>
        <my-footer></my-footer>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {getArticleById} from "../../api/articleApi.js";
import MyFooter from "../../components/myFooter.vue";
import router from "../../routers/router.js";

const route = useRoute() // 路由信息对象
const detailList = ref({}) //详情数据

//获取文章内容
const getArticle = async () => {
  console.log("aid="+route.query.aid)
  let {data} = await getArticleById(route.query.aid)
  detailList.value = data.data
}

onMounted(()=>{
  getArticle()
})

function backHome(){
  router.push("home")
}
</script>


<style scoped>
.article{
  margin-left: 400px;
  width: 1200px;
  height:650px;
  background: #FAFAFA;
}
.time{
  display: inline-block;
  float: right;
}
.content{
  width: 500px;
  margin-left: 400px;
}
.title{
  margin-left: 200px;
  display: inline-block;
}
.back{
  margin-top: 10px;
  margin-right: 200px;
  float: right;
}
</style>